<template>
	<view class="pageView">
		<u-swiper
			:list="banners"
			indicator
			style="position: relative;"
			indicatorActiveColor="#fff"
			:indicatorStyle="{
				bottom: 30
			}"
			autoplay
			circular
			height="231"
		>
		</u-swiper>
		<view class="pageView-titleBlock">
			<u-icon name="arrow-left" color="#fff" @click="handleBack"></u-icon>
			<view class="pageView-titleBlock-title">医院详情</view>
		</view>
		<view class="pageTopBlock">
			<view class="pageTopBlock-block">
				<view class="pageTopBlock-block-top">
					<image :src="infoData.img_url" class="pageTopBlock-block-top-img"></image>
					<view class="pageTopBlock-block-top-right">
						<view class="pageTopBlock-block-top-right-title">{{ infoData.name }}</view>
						<view class="pageTopBlock-block-top-right-content">
							<view class="pageTopBlock-block-top-right-content-left">{{ infoData.level.name }}</view>
							<image class="pageTopBlock-block-top-right-content-img" src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/local.png"></image>
							<view class="pageTopBlock-block-top-right-content-right" v-if="infoData && infoData.juli !== null">{{ (Number(infoData.juli) / 1000).toFixed(2) }}km</view>
						</view>
					</view>
				</view>
				<view class="pageTopBlock-block-middle">
					<view class="pageTopBlock-block-middle-left">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/local.png" class="pageTopBlock-block-middle-left-img"></image>
						<view class="pageTopBlock-block-middle-left-title">{{ infoData.address }}</view>
					</view>
					<view class="pageTopBlock-block-middle-right">
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/gps.png" class="pageTopBlock-block-middle-right-top"></image>
						<view class="pageTopBlock-block-middle-right-content">导航</view>
					</view>
				</view>
				<view class="pageTopBlock-block-bottom">
					<view class="pageTopBlock-block-bottom-left">
						<view class="pageTopBlock-block-bottom-left-left">医院简介：</view>
						<view class="pageTopBlock-block-bottom-left-right">{{ infoData.jianjie_info }}</view>
					</view>
					<view class="pageTopBlock-block-bottom-right">
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="pageBottomBlock">
			<view class="pageBottomBlock-block" v-html="infoData.jianjie"></view>
		</view>
		<view class="doctorBlock" v-if="sx == 'vip'">
			<view class="doctorBlock-block">
				<view class="doctorBlock-block-title">医生专家</view>
				<scroll-view style="height: 22vh;" scroll-y="true" @scrolltolower="handleScrolltolower">
					<view v-for="(item,index) in doctorList" :key="index">
						<doctor-item :item="item"></doctor-item>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import doctorItem from '@/components/doctor-item.vue';
	import { getDoctorList } from '@/api/common.js'
	export default {
		data() {
			return {
				banners: [
					'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pei.png',
					'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pei.png',
					'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/pei.png'
				],
				infoData: null,
				sx: '',
				doctorList: [],
				page: 1
			}
		},
		components: {
			doctorItem
		},
		onShow() {
			this.doctorList = []
			this.sx = uni.getStorageSync('indexType').sx
			this.infoData = uni.getStorageSync('hospitalData')
			this.getDoctor()
		},
		methods: {
			getDoctor() {
				getDoctorList({
					id: uni.getStorageSync('hospitalData').id,
					page: this.page
				})
				.then(res => {
					const { code, data } = res
					if (code == 200001) {
						if (this.doctorList.length == 0) {
							this.doctorList = data.data
						} else {
							this.doctorList = this.doctorList.concat(data.data)
						}
						this.lastPage = data.last_page
					}
				})
			},
			handleScrolltolower() {
				if (this.page < this.lastPage) {
					this.page++
					this.getDoctor()
				}
			},
			handleBack() {
				uni.navigateTo({
					url: '/pages/peiDetail/peiDetail'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		background: #F4F4F4;
		height: 100vh;
		/deep/ .u-swiper-indicator {
			margin-bottom: 90rpx !important;
		}
		&-titleBlock{
			padding-left: 24rpx;
			position: absolute;
			z-index: 10000;
			top: 110rpx;
			display: flex;
			color: #fff;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 36rpx;
			color: #FFFFFF;
			&-title{
				padding-left: 230rpx;
			}
		}
		.pageTopBlock{
			position: absolute;
			top: 390rpx;
			padding: 0px 32rpx;
			&-block{
				padding: 32rpx;
				width: 622rpx;
				height: 376rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				&-top{
					display: flex;
					align-items: center;
					&-img{
						width: 120rpx;
						height: 120rpx;
						border-radius: 100% 100%;
					}
					&-right{
						padding-left: 24rpx;
						&-title{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 36rpx;
							color: #222222;
						}
						&-content{
							display: flex;
							align-items: center;
							&-left{
								padding-right: 16rpx;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #222222;
							}
							&-img{
								width: 28rpx;
								height: 28rpx;
							}
							&-right{
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #999999;
							}
						}
					}
				}
				&-middle{
					padding-top: 48rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&-left{
						display: flex;
						align-items: center;
						&-img{
							width: 28rpx;
							height: 28rpx;
						}
						&-title{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #333333;
						}
					}
					&-right{
						&-top{
							width: 48rpx;
							height: 48rpx;
						}
						&-content{
							padding-top: 8rpx;
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 26rpx;
							color: #999999;
						}
					}
				}
				&-bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 50rpx;
					&-left{
						display: flex;
						align-items: center;
						&-left{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #333333;
						}
						&-right{
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 28rpx;
							color: #333333;
							width: 440rpx;
							white-space: nowrap; /* 不换行 */
							overflow: hidden; /* 隐藏超出的内容 */
							text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
						}
					}
				}
			}
		}
		.pageBottomBlock{
			position: absolute;
			padding: 24rpx;
			top: 830rpx;
			&-block{
				padding: 32rpx;
				width: 622rpx;
				height: 162rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 28rpx;
				color: #333333;
			}
		}
		.doctorBlock{
			position: absolute;
			padding: 24rpx;
			top: 1092rpx;
			&-block{
				width: 622rpx;
				padding: 32rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				&-title{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 36rpx;
					color: #333333;
				}
				.doctorItem{
					width: 622rpx;
					height: 370rpx;
					background: linear-gradient( 180deg, #EFF5FF 18%, rgba(255,255,255,0) 100%), #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}
		}
	}
</style>